<template>
	<div class="pageFaceToFace ">
		<el-dialog title="" :visible.sync="pageIsShow" width="350px" :destroyOnClose='true' :close-on-click-modal="true"
			@closed="handleClosed">
			<div class=" textLeft" v-if="storeUserinfo">
				<div><el-image style="width: 100px;height: 100px;" class=" borderr50"
						:src="storeUserinfo.url+'?w=100&h=100&q=75'" fit="fill"></el-image>
				</div>
				<div class="shs-flex-center-start">
					<div class="shs-flex-center-start" v-show='updateObj.url!=""&&updateObj.url!=storeUserinfo.url'>
						<el-image style="width: 100px;height: 100px;" class=" borderr50"
							:src="updateObj.url+'?w=100&h=100&q=75'" fit="fill"></el-image>
						<el-tag class="marginL5 marginT5 cursor-pointer" @click="handledUpdateInfomation">替换头像</el-tag>
					</div>
					<single-upload tipText="选择新头像" class="marginL5 marginT5" :showTip='false' v-model="updateObj.url"
						:isshowFileList='false'></single-upload>
				</div>
				<div class="shs-flex-center-start marginT5">
					<div>{{storeUserinfo.Integral}}</div>
					<div class="" v-show="storeUserinfo.gender">
						<i class="el-icon-male" style="color: #00f;font-size: 18px;"></i>
					</div>
					<div class="" v-show="!storeUserinfo.gender">
						<i class="el-icon-female" style="color: #ff58b5;font-size: 18px;"></i>
					</div>
				</div>

				<div class="textLeft">
					<div><el-input v-show="edit.uflag" name="username" type="text" v-model="updateObj.username"
							autocomplete="on" placeholder="请输入用户名" maxlength='20'
							style="height: 40px;line-height: 40px;">
							<span slot="prefix">
								<i class="iconfont icon-user"></i>
							</span>
						</el-input></div>
					<div class="shs-flex-center-start">
						<div>{{storeUserinfo.username}}</div>
						<el-tag class="marginL5 marginT5 cursor-pointer "
							@click="edit.uflag=!edit.uflag">{{!edit.uflag?"修改用户名":"取消"}}</el-tag>
						<el-tag class="marginL5 marginT5 cursor-pointer" v-show="edit.uflag" :type="tagType[1]"
							@click="handledUpdateInfomation('uname')">确认修改</el-tag>
					</div>
					<div class="marginT5">
						<div class="shs-flex-center-start">
							<el-button class="button-new-tag" size="small" @click="showTagDetail">修改爱好</el-button>
							<div v-show="handleEqualCode">
								<el-tag class="marginL5  cursor-pointer" :type="tagType[1]"
									@click="handleUpdate('hflag')">确认修改</el-tag>
							</div>
						</div>
						<div class="shs-flex-center-start hobbylistClass marginT5">
							<template v-for="(item,index) in updateObj.hobbylist">
								<el-tag class="marginL5" :key="`hobbytag${index}`"
									:type="tagType[parseInt(Math.random(1) * 5)]">{{item}}</el-tag>
							</template>
						</div>
					</div>
					<div class="" style="height: auto;">
						<div class="shs-flex-center-start marginT5 color-smill">
							<container-page :text="storeUserinfo.signature"></container-page>
							<el-tag class="marginL5  cursor-pointer"
								@click="edit.sflag=!edit.sflag">{{!edit.sflag?"修改个签":"取消"}}</el-tag>
							<el-tag class="marginL5  cursor-pointer" v-show="edit.sflag" :type="tagType[1]"
								@click="handleUpdate('sflag')">确认修改</el-tag>
						</div>
						<div v-show="edit.sflag" style="height: 115px;">
							<el-input type="textarea" name="qianming" :autosize="{ minRows: 1,maxRows:5}" resize='none'
								maxlength='60' placeholder="个性签名" v-model="updateObj.signature"
								style="height: 40px;line-height: 40px;">
								<span slot="prefix">
									<i class="iconfont icon-qianming"></i>
								</span>
							</el-input>
						</div>
					</div>
				</div>

			</div>
			<div v-else class="color-smill textCenter">
				加载中...
			</div>

		</el-dialog>
		<tag-detail ref="TagDetailDialogUpdate" @selected="handleSelectedTag"></tag-detail>
	</div>
</template>

<script>
	import {
		debounce
	} from "@/utils/common.js";
	import {
		handledSHSArray
	} from "@/utils/base"

	import {
		updateUser,
		getInfo,
		updateUserPsd,
		updateUserSignature,
		updateUserHobby
	} from '@/api/user'
	import tagDetail from "@/views/user/components/tagDetail.vue"
	import singleUpload from "@/components/Upload/singleUpload"
	import containerPage from "@/components/container/index"
	export default {
		name: "relationship",
		props: {

		},
		components: {
			tagDetail,
			singleUpload,
			containerPage
		},
		data() {
			return {
				pageIsShow: false, //页面显示
				loading: false, //loding
				userinfo: {},
				tagType: ["", "success", "info", "warning", "danger"],
				updateObj: {}, //修改的提交参数
				oldupdateObj: {
					hobbylist: []
				}, //旧的修改的提交参数
				edit: {
					uflag: false, //修改 用户名的参数
					gflag: false, //修改 性别的参数
					pflag: false, //修改 密码的参数
					hflag: false, //修改 爱好的参数
					sflag: false, //修改 个签的参数

				},
			}
		},
		mounted() {

		},
		computed: {
			storeUserinfo() {
				return this.$store.getters.userInfo
			},
			handleEqualCode() {
				if (this.storeUserinfo.Id && this.updateObj.hobbylist) {
					let diff1 = this.updateObj.hobbylist.filter(item => !this.oldupdateObj.hobbylist.includes(item));
					let diff2 = this.oldupdateObj.hobbylist.filter(item => !this.updateObj.hobbylist.includes(item));
					return diff1.length > 0 || diff2.length > 0
				} else {
					return false
				}
			},
		},
		methods: {
			//显示弹窗
			showTagDetail() {
				let list = ''
				if (this.updateObj.hobbylist) {
					list = JSON.parse(JSON.stringify(this.updateObj.hobbylist))
				}
				this.$refs.TagDetailDialogUpdate.openShow(list)
			},
			//修改爱好标签回显
			handleSelectedTag(res) {
				this.updateObj.hobbylist = res
				this.updateObj.hobbys = res.toString(',');
			},
			//初始化页面 value 是否显示
			initData(isok) {
				this.pageIsShow = isok;
			},

			// 隐藏页面
			handleHiddle(v) {
				this.pageIsShow = v;
			},
			//删除数据
			handleDeleteNumber() {

			},
			//关闭的回调
			handleClosed() {
				this.pageIsShow = false
				this.loading = false

				this.edit = {
					uflag: false,
					gflag: false,
					pflag: false,
					hflag: false,
					sflag: false,
				}
			},

			handleUpdate: debounce(function(code) {
				let obj = {}
				let _this = this;
				if (code == 'sflag') {
					obj.signature = this.updateObj.signature
					updateUserSignature(obj).then(data => {
						_this.$notify({
							title: '',
							message: data.message,
							type: 'success',
							duration: 700
						})
						_this.$store.commit("setUserInfo", {
							...data.data
						})
					})
				} else if (code == "hflag") {
					obj.hobbys = this.updateObj.hobbys
					updateUserHobby(obj).then(data => {
						_this.$notify({
							title: '',
							message: data.message,
							type: 'success',
							duration: 700
						})
						_this.$store.commit("setUserInfo", {
							hobbylist: obj.hobbys
						})
					})
				}


				try {
					this.edit[code] = !this.edit[code]
				} catch (e) {
					//TODO handle the exception
				}

			}), // 修改个人信息  头像 、用户名
			handledUpdateInfomation: debounce(function(code) {
				try {
					let _this = this;
					let obj = {
						...this.storeUserinfo
					};
					if (code == 'uname') {
						obj.username = this.updateObj.username
					}else{
						obj.url=this.updateObj.url
					}
					if (code == 'uname' && this.updateObj.username.length == 0) {
						this.$notify({
							title: '',
							message: "用户名不能为空",
							type: 'warning',
							duration: 700
						})
						return;
					}
					updateUser(obj).then(data => {
						if (code == 'uname') {
							this.edit.uflag = !this.edit.uflag
						}
						_this.$notify({
							title: '',
							message: data.message,
							type: 'success',
							duration: 700
						})
						_this.$store.commit("setUserInfo", {
							...data.data
						})
						_this.$store.commit("setToken", data.token)
						//重新建立websorket
						let sendobj = {
							type: 1022,
							message: "push token",
							token: data.token
						}
						_this.$store.commit("setOnSend", sendobj)
					})
				} catch (error) {
					console.log("修改信息err", error);
				}
			}),
			handledSHSArray
		},
		watch: {
			storeUserinfo: {
				deep: true, // 深度监听
				immediate: true, // 页面初始化时是否触发回调
				handler: function(value, oldVal) {
					if (!value.Id) {
						return
					}
					this.updateObj = {
						...value
					}
					//判断是否是字符 不是直接赋值  是切割
					let list = this.handledSHSArray(value, 'hobbylist')
					this.updateObj.hobbylist = list;
					this.oldupdateObj.hobbylist = list;
				}
			},

		}
	}
</script>

<style scoped>
	.pageFaceToFace :deep(.el-dialog) {
		/* width: 65%; */
		/* min-width: 65% !important; */
		width: 350px;
		min-width: 350px;
		height: auto;
		background-image: linear-gradient(to top, #bdc2e8 0%, #bdc2e8 1%, #e6dee9 100%);
		border-radius: 8px;

	}

	.pageFaceToFace :deep(.el-dialog .el-button) {
		border-radius: 18px;
	}

	.hobbylistClass {
		width: 300px;
		overflow: hidden;
		overflow-x: auto;
	}
</style>